<template>
  <div id="wrapper">
    <div id="pano" style="width: 100%; height: 100%">
      <noscript>
        <table style="width: 100%; height: 100%">
          <tr style="vertical-align: middle">
            <td>
              <div style="text-align: center">
                ERROR:
                <br />
                <br />Javascript not activated
                <br />
                <br />
              </div>
            </td>
          </tr>
        </table>
      </noscript>
    </div>
  </div>
</template>

<script>
import {curUrl1} from 'util/prodUrl'
export default {
  data() {
    return {
      krpano: null,
      pano: null,
    };
  },
  props: {
    xmlPath: {
      type: String,
      default: curUrl1 + "/dikuai/tour.xml"
    }
  },
  mounted() {
    embedpano({
      swf: process.env.BASE_URL + "krpano/tour.swf",
      xml: this.xmlPath,
      target: "pano",
      html5: "auto",
      mobilescale: 1.0,
      passQueryParameters: true,
      onready: this.krpano_onready_callback,
    });
    window.krpano = this.krpano;
    window.openHtml = this.openHtml;
  },
  created() {
    this.pano = JSON.parse(sessionStorage.getItem('pano'))
  },
  methods: {
    krpano_onready_callback(krpano_interface) {
      this.krpano = krpano_interface;
    },
    go() {
      this.krpano.call("loadscene(" + this.pano.scene + ",null,MERGE,BLEND(1));")
    },
    openHtml() {
      this.$emit('openVrClick');
    }
  },
};
</script>
<style scoped>
#wrapper {
  width: 100%;
  height: 100%;
}
</style>